<template>
  <a-space class="module-frame"
           :direction="direction"
           :align="align"
           size="mini"
           @pointerenter="()=>{hover=true}"
           @pointerleave="()=>{hover=false}">
    <div class="frame" :style="frameStyles">
      <slot></slot>
    </div>
    <a-dropdown v-if="hover || isPopupVisible"
                v-model:popup-visible="isPopupVisible"
                position="bl"
                @select="handleSelect">
      <div class="more">
        <i class="iconfont more-icon" :class="direction==='horizontal'?'icon-more-v':'icon-more-h'"/>
      </div>
      <template #content>
        <a-doption>Option 1</a-doption>
      </template>
    </a-dropdown>
  </a-space>
</template>

<script setup>
import {ref} from "vue";
const props = defineProps({
  direction: {
    type: String,
    default:"horizontal"
  },
  align: {
    type: String,
    default:"center"
  },
  showFrame: {
    type: Boolean,
    default:false
  },
  frameStyles:{
    type:Object,
    default:()=>({})
  }
});
const emit = defineEmits(["select"]);
const hover = ref(false);
const isPopupVisible = ref(false);
const handleSelect = (v) => {

}
</script>

<style scoped>
.module-frame{
  position: absolute;
  left: 0;
  top:0;
}
.frame{
  width: 100%;
  border-radius: var(--border-radius-large);
  border: 1px solid var(--color-neutral-3);
}
.more{
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #ffffff;
  border-radius: 10px;
}
.more-icon{
  margin-right: 2px;
  color: var(--color-neutral-6);
}
</style>